<template>
  <div>
    <p>axios使用示例</p>
    <p>Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。</p>
    <button @click="getData">click</button>
    <p>歌手名称：{{ name }}</p>
    <img :src="img" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      img: "",
    };
  },
  created() {
    this.getData();
  },
  methods: {
    // 跨域： 域名、协议、端口号。浏览器的同源策略的限制
    getData() {
      this.$http.get("https://api.imjad.cn/cloudmusic/?type=detail&id=28012031")
      // this.$http
      //   .get("https://api.imjad.cn/cloudmusic", {
      //     params: {
      //       type: "detail",
      //       id: "28012031"
      //     }
      //   })
        // 成功的回调函数
        .then((res) => {
          this.name = res.data.songs[0].ar[0].name;
          this.img = res.data.songs[0].al.picUrl;
        })
        // 失败的回调函数
        .catch(function (error) {
          console.log(error);
        });
    },
  },
};
</script>

<style>
</style>